<template>
	<!-- 环境格局列表 -->
	<view>
		<!-- tab切换 -->
		<u-tabs height="100" font-size="34" active-color="#000000" inactive-color="#999999" bar-width="80"
			bar-height="14" :bar-style="{borderRadius:'14rpx',backgroundColor:'#07C160',bottom:'20rpx',zIndex:'0'}"
			:active-item-style="{zIndex:1}" :list="list" :is-scroll="true" :current="current" @change="change"
			name="category_name">
		</u-tabs>
		<!-- 自然环境 -->
		<template v-for="(item,Index) in list">
			<view class="card-bg-w u-m-t-20" :key="item.category_id" v-if="current == Index">
				<view class="u-font-34">{{item.category_name}}</view>
				<scroll-view scroll-x class="img-wrap">
					<view class="grid">
						<!-- <image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-3.png" mode="widthFix"></image>
						<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-3.png" mode="widthFix"></image> -->
						<image
							:src="el == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-3.png' : el"
							mode="" v-for="el in item.images"></image>
					</view>
				</scroll-view>
				<u-read-more class="read-more" :shadow-style="shadowStyle" show-height="150" close-text="展开"
					:toggle="true">
					<rich-text :nodes="item.content"></rich-text>
				</u-read-more>
			</view>
		</template>
		<!-- 风景名胜 -->
		<!-- <view class="card-bg-w u-m-t-20">
			<view class="u-font-34">风景名胜</view>
			<scroll-view scroll-x class="img-wrap">
				<view class="grid">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-4.png" mode="widthFix"></image>
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-4.png" mode="widthFix"></image>
				</view>
			</scroll-view>
			<u-read-more class="read-more" 
			:shadow-style="shadowStyle" 
			show-height="150" 
			close-text="展开"
			:toggle="true">
				<rich-text :nodes="content"></rich-text>
			</u-read-more>
		</view> -->
		<!-- 文物古迹 -->
		<!-- <view class="card-bg-w u-m-t-20">
			<view class="u-font-34">文物古迹</view>
			<scroll-view scroll-x class="img-wrap">
				<view class="grid">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-5.png" mode="widthFix"></image>
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-5.png" mode="widthFix"></image>
				</view>
			</scroll-view>
			<u-read-more class="read-more" 
			:shadow-style="shadowStyle" 
			show-height="150" 
			close-text="展开"
			:toggle="true">
				<rich-text :nodes="content"></rich-text>
			</u-read-more>
		</view> -->
		<!-- 村落风貌 -->
		<!-- <view class="card-bg-w u-m-t-20">
			<view class="u-font-34">村落风貌</view>
			<scroll-view scroll-x class="img-wrap">
				<view class="grid">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-6.png" mode="widthFix"></image>
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-6.png" mode="widthFix"></image>
				</view>
			</scroll-view>
			<u-read-more class="read-more" 
			:shadow-style="shadowStyle" 
			show-height="150" 
			close-text="展开"
			:toggle="true">
				<rich-text :nodes="content"></rich-text>
			</u-read-more>
		</view> -->
		<!-- 村落选址 -->
		<!-- <view class="card-bg-w u-m-t-20">
			<view class="u-font-34">村落选址</view>
			<scroll-view scroll-x class="img-wrap">
				<view class="grid">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-6.png" mode="widthFix"></image>
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-6.png" mode="widthFix"></image>
				</view>
			</scroll-view>
			<u-read-more class="read-more" 
			:shadow-style="shadowStyle" 
			show-height="150" 
			close-text="展开"
			:toggle="true">
				<rich-text :nodes="content"></rich-text>
			</u-read-more>
		</view> -->
		<!-- 村落格局 -->
		<!-- <view class="card-bg-w u-m-t-20">
			<view class="u-font-34">村落格局</view>
			<scroll-view scroll-x class="img-wrap">
				<view class="grid">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-7.png" mode="widthFix"></image>
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-7.png" mode="widthFix"></image>
				</view>
			</scroll-view>
			<u-read-more class="read-more" 
			:shadow-style="shadowStyle" 
			show-height="150" 
			close-text="展开"
			:toggle="true">
				<rich-text :nodes="content"></rich-text>
			</u-read-more>
		</view> -->
		<!-- 建村智慧 -->
		<!-- <view class="card-bg-w u-m-t-20">
			<view class="u-font-34">建村智慧</view>
			<scroll-view scroll-x class="img-wrap">
				<view class="grid">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-8.png" mode="widthFix"></image>
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-8.png" mode="widthFix"></image>
				</view>
			</scroll-view>
			<u-read-more class="read-more" 
			:shadow-style="shadowStyle" 
			show-height="150" 
			close-text="展开"
			:toggle="true">
				<rich-text :nodes="content"></rich-text>
			</u-read-more>
		</view> -->
	</view>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [
					// 	{
					// 	name: '自然环境'
					// }, {
					// 	name: '风景名胜'
					// }, {
					// 	name: '文物古迹'
					// }, {
					// 	name: '村落风貌'
					// },
				],
				current: 0,
				content: `龙虎山位于江西省鹰潭市西南20公里处。东汉中叶，正一道创始人张道陵曾在此炼丹，传说“丹成而龙虎现”，山因得名。其中天门山最高，海拔1300米。龙虎山位于江西省鹰潭市西南20公里处。东汉中叶，正一道创始人张道陵曾在此炼丹，传说“丹成而龙虎现”，山因得名。其中天门山最高，海拔1300米。`,
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},

				id: ''
			}

		},
		onLoad(options) {
			// console.log(options);
			this.id = options.id

			// 环境格局列表
			this.get_villages_environment(this.id)
		},
		methods: {
			change(index) {
				this.current = index;
			},
			parseLoaded() {
				this.$refs.uReadMore.init();
			},

			// 环境格局列表
			get_villages_environment(village_id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.villages_environment,
					method: 'GET',
					data: {
						village_id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						this.list = res.data
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.img-wrap {
		width: 685rpx;
		margin-top: 35rpx;
		margin-bottom: 30rpx;

		.grid {
			width: 1300rpx;
			display: grid;
			gap: 30rpx;
			grid-template-columns: repeat(auto-fill, 560rpx);

			image {
				width: 560rpx;
				height: 360rpx;
			}
		}
	}

	.read-more {
		/deep/ .u-content__showmore-wrap {
			justify-content: flex-start;
			width: 160rpx;
			height: 66rpx;
			background: #F7FEFC;
			border: 1px solid #07C160;
			border-radius: 33rpx;
			padding-bottom: 0;
			text-align: center;
			padding-left: 38rpx;

			text {
				font-size: 28rpx !important;
				color: #07C160 !important;
			}
		}

	}
</style>
<style>
	page {
		padding: 0;
		padding-bottom: 30rpx;
	}
</style>